<template>
	<view>
		<wd-overlay :show="showcarModel">
		  <view class="wrapper">
		    <view class="block">
				<view class="closeicon">
					<wd-icon name="close" size="22px" color="#1B9C61" @click="closepopup"></wd-icon>
					<text class="commitbtn" @click="commitData">确定</text>
				</view>
				<view class="tourist-info-container flex items-center">
				  <view 
					  v-for="(item,index) in props.carModelData"
					  :key="index"
					  @click="handleUser(item,index)"
					  :class="['tourist-info',index === choiceCarId ? 'active' : '']"
				  >
					{{item.name}} （{{item.seats}}座）
				  </view>
				</view>
			</view>
		  </view>
		</wd-overlay>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const props = defineProps({
		showcarModel:  {
			type: Boolean,
			default: false
		},
		carModelData:  {
			type: Array,
			default: [] 
		},
	});  
	const cardatainfo = ref({}); 
  
	const choiceCarId = ref();
	const handleUser = (data,index)=>{
		cardatainfo.value = data
		choiceCarId.value = index;
  	  
	}
	const emit = defineEmits(['close']); 
    // 隐藏弹出层
    const closepopup = () => {
		emit('close',''); 
    };
	
	const commitData = () => {
		console.log(cardatainfo.value);
		if(!choiceCarId.value) return uni.showToast({ title: '请选择车型', icon: 'none' });
		emit('close',cardatainfo.value); 
	};
</script>

<style lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  border-radius: 10rpx;
  width: 80%;
  height: 740rpx;
  background-color: #fff;
  text-align: center;
}
.closeicon{
	/* border: 1rpx solid; */
	width: 90%;
	padding: 5%;
	display: flex;
	justify-content: space-between;
}
.commitbtn{
	padding: 10rpx 20rpx;
	background-color: #1B9C61;
	color: #fff;
	border-radius: 15rpx; 
}
.tourist-info-container { 
  // border: 1rpx solid;
  padding: 10rpx 20rpx;
  flex-wrap: wrap;
  .tourist-info {
	font-size: 25rpx;
    padding: 20rpx;
	margin: 20rpx;
	border-radius: 10.5rpx;
	border: 1rpx solid #1B9C61;  
	text-align: center;
  }
}

.active{
  color: #FDFFEB !important;
  background:#1B9C61 !important;
}
.status{
	gap: 20rpx;
  display: flex;
  align-items: center; 
  justify-content: center;
}
.statusimg{
	width: 75rpx;
	height: 75rpx;
}
.stutastext{
	font-family: PingFang SC;
	font-weight: 800;
	font-size: 42rpx;
	color: #2B2B24;
}
.tips{
	margin-top: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 29rpx;
	color: #1B9C61;
}
.contect{
	font-family: PingFang SC;
	/* font-weight: bold; */
	font-size: 24rpx;
	color: #1B9C61;
}
</style>
